<template>
  <div class="order">
    <!-- top -->
    <div class="header">
      <van-icon name="arrow-left" @click="back" />
      <p class="must-read">我的订单</p>
      <span class="edit" @click="$router.push('/article/468172')">售后</span>
    </div>
    <!-- body -->
    <div class="body">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          :title="`订单编号:#${o.id} ${o.orderTime.substring(0,10)} ${o.orderTime.substring(11,19)}`"
          :name="o.id"
          value="已发货"
          v-for="o in orderList"
          :key="o.id"
        >
          <div class="order-item" v-for="i in o.orderItems" :key="i.id" @click="$router.push(`/book/${i.bookId}`)">
            <p class="name">{{ i.bookName }}</p>
            <div class="info">
              <span class="type">电子书</span>
              <p class="price">
                {{ i.price }}元<span>x{{ i.quantity }}</span>
              </p>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { OweOrderAPI } from "@/apis";
export default {
  data() {
    return {
      //
      activeNames: ["1"],
      // 订单数据
      orderList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 网络请求
    async getData() {
      // 主要网络请求
      let { data } = await this.$http(OweOrderAPI, {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.orderList = data;
    },
    // 回退
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    background-color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--more-bg-white);
    .must-read {
      font-size: 16px;
      text-align: center;
      line-height: 21px;

      margin-left: 15px;
    }
    .edit {
      color: var(--theme-blue);
      text-decoration: underline;
      font-size: 16px;
      line-height: 21px;
      text-align: right;
    }
  }
  .body {
    padding: 50px 0;
    background-color: #fff;
    .order-item {
      padding: 10px 0;
      font-size: 14px;
      border-bottom: 1px solid #eee;
      .name {
        color: var(--theme-blue);
        line-height: 20px;
      }
      .info {
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
        span.type {
          color: var(--more-font-grey);
          line-height: 23px;
        }
        p.price {
          color: var(--tag-font-orange);
          line-height: 23px;
          span {
            color: var(--more-font-grey);
            line-height: 23px;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>